<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// 只在开发模式下显示
const isDev = computed(() => window.elec?.dev?.isDev || false)

// 开发模式信息
const electronVersion = ref(window.elec?.versions?.electron || 'N/A')
const nodeVersion = ref(window.elec?.versions?.node || 'N/A')
const chromeVersion = ref(window.elec?.versions?.chrome || 'N/A')

// 性能测量
const fps = ref(0)
const memoryUsage = ref(0)
const lastFrameTime = ref(0)
const frameCount = ref(0)
const elapsedTime = ref(0)
const startTime = ref(Date.now())

// 计算运行时间
const runningTime = computed(() => {
  return Math.floor((Date.now() - startTime.value) / 1000) + ' ' + t('dev.seconds')
})

// 开发模式功能
const logEnvironment = () => {
  window.elec?.dev?.logEnv()
}

const reloadApp = () => {
  window.elec?.dev?.reload()
}

const toggleDevTools = () => {
  window.elec?.dev?.toggleDevTools()
}

// 测量FPS
const measureFPS = () => {
  if (!isDev.value) return

  const now = performance.now()
  const elapsed = now - lastFrameTime.value
  
  frameCount.value++
  elapsedTime.value += elapsed
  
  if (elapsedTime.value >= 1000) {
    fps.value = Math.round((frameCount.value * 1000) / elapsedTime.value)
    frameCount.value = 0
    elapsedTime.value = 0
    
    // 测量内存使用
    if (window.performance && window.performance.memory) {
      const memory = (window.performance as any).memory
      memoryUsage.value = Math.round(memory.usedJSHeapSize / (1024 * 1024))
    }
  }
  
  lastFrameTime.value = now
  requestAnimationFrame(measureFPS)
}

onMounted(() => {
  if (isDev.value) {
    requestAnimationFrame(measureFPS)
  }
})
</script>

<template>
  <div class="dev-tools" v-if="isDev">
    <el-drawer
      :title="t('dev.title')"
      v-model="showPanel"
      direction="rtl"
      size="400px"
    >
      <div class="dev-panel">
        <el-tabs>
          <el-tab-pane :label="t('dev.systemInfo')">
            <el-descriptions :column="1" border>
              <el-descriptions-item :label="t('dev.runningTime')">
                {{ runningTime }}
              </el-descriptions-item>
              <el-descriptions-item label="FPS">
                {{ fps }}
              </el-descriptions-item>
              <el-descriptions-item :label="t('dev.memoryUsage')">
                {{ memoryUsage }} MB
              </el-descriptions-item>
              <el-descriptions-item label="Electron">
                {{ electronVersion }}
              </el-descriptions-item>
              <el-descriptions-item label="Node.js">
                {{ nodeVersion }}
              </el-descriptions-item>
              <el-descriptions-item label="Chrome">
                {{ chromeVersion }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          
          <el-tab-pane :label="t('dev.tools')">
            <div class="actions-list">
              <el-button @click="reloadApp" type="primary">
                <el-icon><Refresh /></el-icon>
                {{ t('dev.reloadApp') }}
              </el-button>
              
              <el-button @click="toggleDevTools" type="info">
                <el-icon><Monitor /></el-icon>
                {{ t('dev.toggleDevTools') }}
              </el-button>
              
              <el-button @click="logEnvironment" type="warning">
                <el-icon><Document /></el-icon>
                {{ t('dev.logEnv') }}
              </el-button>
            </div>
            
            <div class="tips">
              <p>{{ t('dev.tips.title') }}</p>
              <ol>
                <li>{{ t('dev.tips.openDevTools') }}</li>
                <li>{{ t('dev.tips.reload') }}</li>
                <li>{{ t('dev.tips.forceReload') }}</li>
              </ol>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    
    <el-button
      class="dev-toggle"
      circle
      type="danger"
      size="small"
      @click="showPanel = true"
      :title="t('dev.title')"
    >
      <el-icon><SetUp /></el-icon>
    </el-button>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      showPanel: false
    }
  }
}
</script>

<style scoped>
.dev-tools {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.dev-toggle {
  opacity: 0.8;
}

.dev-toggle:hover {
  opacity: 1;
}

.dev-panel {
  padding: 10px;
}

.actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.actions-list .el-button {
  margin: 0;
}

.tips {
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f9eb;
  border-radius: 4px;
  color: #67c23a;
}

.tips p {
  font-weight: bold;
  margin-bottom: 8px;
}

.tips ol {
  padding-left: 20px;
}

.tips li {
  margin-bottom: 4px;
}
</style> 